<template>
  <div class="home height_100" @click.stop="showUserInfo" @mousemove="moveDownload" @mouseup="beginMove = false" @mouseleave="beginMove = false">
    <left-side></left-side>
    <div chat-infobox="444" class="right width_100 height_100" >
      <user-info-box ref="userInfoBoxDialog"></user-info-box>
      <videoInvitation v-if="ifShowVideoInvitation"></videoInvitation>
      <origin-image-dialog v-if="showOriginImageDialog"></origin-image-dialog>
      <download-box @beginMove="beginMoveBox" :moveX="moveX" :moveY="moveY" :moveFileX="moveFileX" :moveFileY="moveFileY"></download-box>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import downloadBox from './components/downloadLine'
import leftSide from './components/leftSide'
import userInfoBox from './components/userInfoDialog'
import videoInvitation from '@/components/videoInvitation'
export default {
  data () {
    return {
      beginMove: false,
      moveX: 0,
      moveY: 0,
      moveFileX: 0,
      moveFileY: 0
    }
  },
  computed: {
    ifShowVideoInvitation () {
      return this.$store.state.common.ifShowVideoInvitation
    },
    // 显隐原图的模态框
    showOriginImageDialog () {
      return this.$store.state.common.ifShowOriginDialog
    }
  },
  components: {
    leftSide,
    userInfoBox,
    videoInvitation,
    downloadBox
  },
  watch: {
    '$route.path': {
      handler (val) {
        this.$store.commit('common/set_ifShowUserInfo', false)
        this.$store.commit('common/set_ifShowPersonalInfo')
      }
    }
  },
  methods: {
    // 获取好友请求数量
    getRequestCount () {
      this.$store.dispatch('addressList/getRequestCount')
    },
    showUserInfo (e) { // 展示信息框
      if (e.target.getAttribute('showuserinfo')) { // 展示信息框
        const userId = e.target.getAttribute('showuserinfo').split('&')[1]
        let pageX = e.pageX
        let pageY = e.pageY
        const maxY = document.body.clientHeight
        const maxX = document.body.clientWidth - 20
        if (pageX + 3.6 * this.$_currentRem > maxX) {
          pageX = (pageX - 3.6 * this.$_currentRem) / this.$_currentRem
        } else {
          pageX = pageX / this.$_currentRem
        }
        if (pageY + 5.2 * this.$_currentRem > maxY) {
          pageY = (maxY - 5.4 * this.$_currentRem) / this.$_currentRem
        } else {
          pageY = pageY / this.$_currentRem
        }
        this.$refs.userInfoBoxDialog.setCurrentInfo(userId)
        this.$store.commit('common/set_userInfoType', 1)
        this.$store.commit('common/set_ifShowUserInfo', true)
        this.$refs.userInfoBoxDialog.setPosition(pageX, pageY)
      } else if (e.target.getAttribute('personalInfo')) { // 侧边栏个人信息
        this.$store.commit('common/set_ifShowPersonalInfo', true)
      } else if (e.target.getAttribute('downloadFile')) {
        this.moveFileX = e.pageX
        this.moveFileY = e.pageY
      } else {
        let el = e.target
        let parentELName = ''
        do {
          if (el && el.getAttribute('chat-infobox')) {
            parentELName = el.getAttribute('chat-infobox')
          } else {
            el = el.parentElement
            parentELName = el ? el.getAttribute('chat-infobox') : ''
          }
        } while (el && !parentELName)
        switch (parentELName) {
          case '444':
            this.$store.commit('common/set_ifShowUserInfo', false)
            this.$store.commit('common/set_ifShowPersonalInfo', false)
            break

          default:
            break
        }
      }
    },
    beginMoveBox (flag) { // 下载任务盒子开始移动
      this.beginMove = flag
    },
    moveDownload (e) { // 移动下载框
      if (!this.beginMove) return false
      this.moveX = e.pageX
      this.moveY = e.pageY
    }
  },
  created () {
    this.getRequestCount()
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  overflow: hidden;
  .right {
    float: left;
    width: calc(100% - 72px);
  }
}
</style>
